import React, { useState, useEffect } from 'react';
import { Alert, Col, Row, Statistic, Card, Divider } from 'antd';
// 或者
import { ScrollRankingBoard } from '@jiaminghi/data-view-react'
import { useRequest } from 'ahooks';
import { doFetch } from '@/utils/doFetch';
import useCurrentUser from '@/utils/useCurrentUser';
import dayjs from 'dayjs';

let col = { xs: 24, sm: 24, md: 6, lg: 6, xl: 6, xxl: 6 };
let cols = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 };


function HomePage() {

    const { currentUser, initialState: { range } } = useCurrentUser();

    const { data } = useRequest(async () => {
        let res = await doFetch({ url: "/stat/user", params: currentUser?.isCompany === 1 ? {} : { orgId: currentUser?.orgId } });

        let res1 = await doFetch({ url: "/stat/points", params: { orgId: currentUser?.orgId } });

        let res2 = await doFetch({ url: "/stat/project", params: { orgId: currentUser?.orgId } });

        let res3 = await doFetch({ url: "/stat/org", params: {} });

        let res4 = await doFetch({ url: "/stat/block", params: {} });

        return {
            user: res?.data?.data ?? {},
            points: res1?.data?.data ?? {},
            project: res2?.data?.data ?? {},
            org: res3?.data?.data ?? {},
            block: res4?.data?.data ?? {}
        }

    }, {
        refreshDeps: { currentUser }
    })

    const rank = useRequest(async () => {
        let res = await doFetch({
            url: "/stat/rank", params: {
                orgId: currentUser?.orgId,
                startTm: range?.[0] ? dayjs(range[0]).format("YYYY-MM-DD") : null,
                endTm: range?.[1] ? dayjs(range[1]).format("YYYY-MM-DD") : null
            }
        });
        return res?.data?.data ?? [];
    }, {
        refreshDeps: [range]
    })


    return (
        <div>
            <Row gutter={12}>
                <Col {...cols} style={{ marginBottom: 12 }}>
                    <Card title={<div style={{ fontSize: 16, padding: "16px 0 0 12px" }}>用户统计</div>} size='small' >
                        <Row gutter={0} style={{ padding: "16px 6px 0 6px" }}>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="全部用户数" value={data?.user?.totalNum} />
                            </Col>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="当前在线人数" value={data?.user?.onlineNum} precision={0} valueStyle={{
                                    color: '#3f8600',
                                }} />
                            </Col>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="管理员" value={data?.user?.adminNum} />
                            </Col>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="普通用户" value={data?.user?.commonNum} />
                            </Col>
                        </Row>
                    </Card>
                </Col>
                <Col {...cols} style={{ marginBottom: 12 }}>
                    <Card title={<div style={{ fontSize: 16, padding: "16px 0 0 12px" }}>项目统计</div>} size='small'>
                        <Row gutter={0} style={{ padding: "16px 6px 0 6px" }}>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="全部项目" value={data?.project?.totalNum} />
                            </Col>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="当前进行中" value={data?.project?.onDoingNum} precision={0} valueStyle={{
                                    color: '#3f8600',
                                }} />
                            </Col>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="已完成" value={data?.project?.finishNum} />
                            </Col>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="已延期" value={data?.project?.delayNum} valueStyle={{
                                    color: 'red',
                                }} />
                            </Col>
                        </Row>
                    </Card>
                </Col>
            </Row>

            <Card title={<div style={{ fontSize: 16, padding: "16px 0 0 12px" }}>积分统计</div>} size='small' style={{ marginBottom: 12 }}>
                <Row gutter={0} style={{ padding: "16px 6px 0 6px" }}>
                    <Col {...col} style={{ marginBottom: 12 }}>
                        <Statistic title="全部项目积分" value={data?.points?.totalNum} />
                    </Col>
                    <Col {...col} style={{ marginBottom: 12 }}>
                        <Statistic title="已分配到人员积分" value={data?.points?.assignNum} precision={0} valueStyle={{
                            color: '#3f8600',
                        }} />
                    </Col>
                    <Col {...col} style={{ marginBottom: 12 }}>
                        <Statistic title="审核人员积分" value={data?.points?.approverNum} />
                    </Col>
                    <Col {...col} style={{ marginBottom: 12 }}>
                        <Statistic title="未分配到人员" value={data?.points?.noAssignNum} valueStyle={{
                            color: 'red',
                        }} />
                    </Col>
                </Row>
                <div>
                    <h2 className='ltitle'>用户积分排行</h2>
                    <ScrollRankingBoard config={{
                        rowNum: 3,
                        data: rank?.data?.map(it => ({
                            "name": it.userName,
                            "value": it?.points
                        }))
                    }} style={{ width: '100%', height: '180px' }} />
                </div>
            </Card>

            <Row gutter={12}>
                <Col {...cols} style={{ marginBottom: 12 }}>
                    <Card title={<div style={{ fontSize: 16, padding: "16px 0 0 12px" }}>服务商统计</div>} size='small'>
                        <Row gutter={0} style={{ padding: "16px 6px 0 6px" }}>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="服务商数量" value={data?.org?.orgNum} />
                            </Col>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="服务商项目数量" value={data?.org?.projectNum} precision={0} valueStyle={{
                                    color: '#3f8600',
                                }} />
                            </Col>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="服务商人员总数" value={data?.org?.userNum} />
                            </Col>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="服务商积木低于1000" value={data?.org?.lowOrgNum} valueStyle={{
                                    color: 'red',
                                }} />
                            </Col>
                        </Row>
                    </Card>
                </Col>
                <Col {...cols} style={{ marginBottom: 12 }}>
                    <Card title={<div style={{ fontSize: 16, padding: "16px 0 0 12px" }}>服务商积木统计</div>} size='small' >
                        <Row gutter={0} style={{ padding: "16px 6px 0 6px" }}>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="全部积木" value={data?.block?.totalNum} />
                            </Col>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="已使用积木" value={data?.block?.useBlock} precision={0} valueStyle={{
                                    color: '#3f8600',
                                }} />
                            </Col>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="本周使用积木" value={data?.block?.weekBlock} />
                            </Col>
                            <Col {...col} style={{ marginBottom: 12 }}>
                                <Statistic title="本月使用积木" value={data?.block?.monthBlock} valueStyle={{
                                    color: 'red',
                                }} />
                            </Col>
                        </Row>
                    </Card>
                </Col>
            </Row>




        </div>
    );
}

export default HomePage;